.test-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

.test-container h1 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
}

.demo-section {
  margin-bottom: 3rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}

.demo-section h2 {
  color: #555;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.text-flow-container {
  text-align: center;
  padding: 2rem 0;
}

.text-flow-container.large {
  padding: 3rem 0;
}

.text-flow {
  display: inline-block;
  margin: 0 1rem;
  /* font-weight: bold; */
  position: relative;
}

/* 基础流光效果 - 红色到白色 */
.text-flow-primary {
  background-image: linear-gradient(
    to right,
    #ff0000,
    #ffffff 12.5%,
    #ff0000 25%,
    #ffffff 37.5%,
    #ff0000 50%,
    #ff0000 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 100%;
  animation: light 2s infinite linear;
}

/* 次要流光效果 - 黑色到白色 */
.text-flow-secondary {
  background-image: linear-gradient(
    to right,
    #000000,
    #000000 50%,
    #ffffff 62.5%,
    #000000 75%,
    #ffffff 87.5%,
    #000000 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 800% 100%;
  animation: light 2s infinite linear;
}

.text-flow-grey {
  background-image: linear-gradient(
    to right,
    #4b5563,
    #ffffff 12.5%,
    #4b5563 25%,
    #ffffff 37.5%,
    #4b5563 50%,
    #4b5563 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 100%;
  animation: light 2s infinite linear;
}


/* 蓝色流光效果 */
.text-flow-blue {
  background-image: linear-gradient(
    to right,
    #0066cc,
    #ffffff 12.5%,
    #0066cc 25%,
    #ffffff 37.5%,
    #0066cc 50%,
    #0066cc 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 100%;
  animation: light 2s infinite linear;
}

/* 绿色流光效果 */
.text-flow-green {
  background-image: linear-gradient(
    to right,
    #00cc00,
    #ffffff 12.5%,
    #00cc00 25%,
    #ffffff 37.5%,
    #00cc00 50%,
    #00cc00 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 100%;
  animation: light 2s infinite linear;
}

/* 紫色流光效果 */
.text-flow-purple {
  background-image: linear-gradient(
    to right,
    #6600cc,
    #ffffff 12.5%,
    #6600cc 25%,
    #ffffff 37.5%,
    #6600cc 50%,
    #6600cc 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 100%;
  animation: light 2s infinite linear;
}

/* 大字体流光效果 */
.text-flow-container.large .text-flow {
  font-size: 3.5rem;
  margin: 0 1.5rem;
}

/* 慢速动画 */
.text-flow.slow {
  /* animation: light 4s infinite linear; */
}

/* 快速动画 */
.text-flow.fast {
  animation: light 1s infinite linear;
}

/* 流光动画关键帧 */
@keyframes light {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* 兼容性处理 */
@-webkit-keyframes light {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .test-container {
    padding: 1rem;
  }
  
  .text-flow {
    font-size: 1.5rem;
    margin: 0 0.5rem;
  }
  
  .text-flow-container.large .text-flow {
    font-size: 2.5rem;
    margin: 0 1rem;
  }
} 